<template>
  <Card :bordered="false" dis-hover>
    <div>
      <Form class="ivu-mb-16 ivu-pt-8">
        <DatePicker :editable="false"
          v-width="200"
          type="daterange"
          placeholder="请选择拨号日期"
          format="yyyy-MM-dd"
          @on-change="changeTime"
          :options="options"
          v-model="params.time"
        />
        <Input
          class="ivu-ml-8"
          v-width="260"
          placeholder="请输入设备别名、手机号"
          v-model="params.keyword"
          @on-enter="keywordEv"
          clearable
          @on-clear="clearKeyword"
        />
        <Select
          class="ivu-ml-8"
          v-width="150"
          placeholder="请选择呼叫类型"
          clearable
          @on-change="changeType"
          v-model="params.type"
        >
          <Option
            v-for="item in typeList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <!-- <Select
          class="ivu-ml-8"
          v-width="150"
          placeholder="请选择设备归属人"
          clearable
          @on-change="getData"
          v-model="params.accountid"
        >
          <Option
            v-for="item in member_list"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select> -->
      </Form>
    </div>
    <div>
      <Table highlight-row
        :max-height="635"
        :columns="columns"
        :data="list"
        :loading="loading"
        @on-sort-change="sortchange"
        border
      >
        <template slot="type" slot-scope="{ row }">
          <Tag v-if="row.type === '1'" color="volcano">呼入</Tag>
          <Tag v-if="row.type === '2'" color="cyan">呼出</Tag>
          <Tag v-if="row.type === '3'" color="blue">未接</Tag>
          <Tag v-if="row.type === '4'" color="geekblue">语音留言</Tag>
          <Tag v-if="row.type === '5'" color="orange">挂断</Tag>
        </template>
        <template slot="action" slot-scope="{ row }">
          <div v-if="row.is_call === '1'">
            <a @click="handleSound(row)">听录音</a>
            <Divider type="vertical" />
            <a @click="downloadurlFile(row.file_url)">下载</a>
          </div>
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page
          :total="total"
          :current.sync="params.page"
          show-elevator
          show-sizer
          show-tota
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </div>
    <Modal
      title="听录音"
      v-model="sound"
      :mask-closable="false"
      width="360"
      footer-hide
      draggable
      @on-cancel="cancel"
    >
      <audio :src="musicurl" controls id="audio" v-if="musicurl != ''"></audio>
      <div v-else>暂无录音</div>
      <div v-if="musicurl != ''" style="margin-top:10px">
        播放倍速：
        <RadioGroup v-model="model1" @on-change="changeaudio(model1)">
          <Radio :label="item.id" v-for="item in RadioGroup" :key="item.id">{{
            item.name
          }}</Radio>
        </RadioGroup>
      </div>
    </Modal>
  </Card>
</template>
<script>
    import { getVoice } from '@/api/robot.js';
    export default {
        name: 'call',
        data () {
            return {
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() >= new Date();
                    }
                },
                model1: 1,
                sound: false,
                typeList: [],
                musicurl: '',
                RadioGroup: [
                    { id: 0.5, name: '0.5' },
                    { id: 0.75, name: '0.75' },
                    { id: 1, name: '1.0' },
                    { id: 1.5, name: '1.5' },
                    { id: 1.75, name: '1.75' },
                    { id: 2, name: '2.0' }
                ],
                statusList: [],
                loading: false,
                params: {
                    page: 1,
                    pageSize: 10,
                    type: '',
                    call: '',
                    keyword: '',
                    time: '',
                    order_colum: 'duration',
                    order_sort: ''
                },
                total: 0,
                columns: [
                    {
                        title: '设备别名',
                        key: 'nickname',
                        width: 160,
                        tooltip: true,
                        fixed: 'left'
                    },
                    {
                        title: '来电号码',
                        key: 'mobile',
                        minWidth: 160
                    },
                    {
                        title: '拔号时间',
                        key: 'call_time',
                        minWidth: 180
                    },
                    {
                        title: '通话时长',
                        key: 'duration',
                        sortable: 'custom',
                        minWidth: 130
                    },
                    {
                        title: '呼叫类型',
                        slot: 'type',
                        minWidth: 100
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        fixed: 'right',
                        width: 128
                    }
                ],
                list: []
                // member_list: []
            };
        },

        methods: {
            // 切换分页
            changePage (value) {
                this.params.page = value;
                this.getData();
            },
            clearKeyword () {
                if (JSON.stringify(localStorage.getItem('robot-call')) !== JSON.stringify(['', ''])) {
                    this.params.time = localStorage.getItem('robot-call')
                }
                this.getData();
            },
            sortchange (e) {
                this.params.order_sort = e.order
                this.getData();
            },
            changeaudio (model1) {
                const audio = document.getElementById('audio');
                audio.playbackRate = model1;
            },
            cancel () {
                const audio = document.getElementById('audio');
                if (this.musicurl !== '') {
                    audio.pause();
                }
                this.model1 = 1;
                this.musicurl = '';
            },
            changePageSize (value) {
                this.params.pageSize = value;
                this.params.page = 1;
                this.getData();
            },
            keywordEv () {
                if (JSON.stringify(this.params.time) !== JSON.stringify(['', ''])) {
                    let timer = [this.$Date(this.params.time[0]).format('YYYY-MM-DD'), this.$Date(this.params.time[1]).format('YYYY-MM-DD')]
                    localStorage.setItem('robot-call', timer)
                    this.params.time = ['', ''];
                }
                this.params.type = '';
                this.params.order_sort = ''
                this.params.page = 1;
                this.getData();
            },
            // 切换时间
            changeTime (value) {
                this.params.page = 1;
                this.params.time[0] = value[0] === '' ? '' : value[0] + ' 00:00:00';
                this.params.time[1] = value[1] === '' ? '' : value[1] + ' 23:59:59';
                let timer = ['', '']
                if (JSON.stringify(this.params.time) !== JSON.stringify(['', ''])) {
                    timer = [this.$Date(this.params.time[0]).format('YYYY-MM-DD'), this.$Date(this.params.time[1]).format('YYYY-MM-DD')]
                }
                localStorage.setItem('robot-call', timer)
                this.getData();
            },
            // 切换类型
            changeType (value) {
                if (!value) {
                    this.params.type = '';
                }
                this.params.page = 1;
                this.getData();
            },
            changeStatus () {
                this.params.page = 1;
                this.getData();
            },
            getData () {
                this.loading = true;
                let params = JSON.parse(JSON.stringify(this.params));
                delete params.time;
                params.start_time = this.params.time[0] ? this.params.time[0] : '';
                params.end_time = this.params.time[1] ? this.params.time[1] : '';
                getVoice(params).then((res) => {
                    this.typeList = res.type;
                    this.statusList = res.call;
                    this.list = res.list.list;
                    this.total = res.list.total;
                    // this.member_list = res.member_list
                    this.loading = false;
                });
            },
            handleSound (data) {
                this.musicurl = data.file_url;
                this.sound = true;
            },
            // 下载音频
            downloadurlFile (url) {
                fetch(url).then(res => {
                    // console.log(res, 'res')
                    res.blob().then(myBlob => {
                        const href = URL.createObjectURL(myBlob);
                        const a = document.createElement('a');
                        a.href = href;
                        a.download = this.getFileName(url); // 下载文件重命名
                        a.click();
                        a.remove();
                    });
                })
            },
            /**
             * 根据文件url获取文件名
             * @param url 文件url
             */
            getFileName (url) {
                var num = url.lastIndexOf('/') + 1
                var fileName = url.substring(num)
                // 把参数和文件名分割开
                fileName = decodeURI(fileName.split('?')[0]);
                return fileName;
            }
        },
        mounted () {
            localStorage.setItem('robot-call', ['', ''])
            this.getData();
        }
    };
</script>
